<style>
    /* .comment-container {
        width: 934px;
        background-color: #ffffff;
        border: 1px solid #e8e8e8;
    }
    .comment-item {
        position: relative;
    }
    .comment-bone {
        font-size: 14px;
        border-bottom: 1px solid #e8e8e8;
        padding: 22px 0;
        position: relative;
    }
    .comment-bone-avatar {
        position: absolute;
        left: 22px;
        width: 40px;
        height: 40px;
    }
    .img-avatar {
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        display: inline-block;
        height: 100%;
        width: 100%;
    }
    .comment-bone-body {
        padding-left: 76px;
        padding-right: 22px;
    }
    .comment-bone-subtitle-right {
        float: right;
        color: #999;
    }
    .comment-bone-content {
        margin-top: 10px;
        margin-bottom: 10px;
    }  
    .comment-item-content {
        word-break: break-all;
        cursor: pointer;
    }
    .comment-item-related-article {
        background-color: #f4f5f6;
        line-height: 32px;
        padding-left: 10px;
        margin-top: 10px;
        margin-bottom: 16px;
        color: #222;
    }
    .comment-bone-actions-right {
        float: right;
    }
    .comment-bone-actions-item-right {
        margin-left: 14px;
        color: #406599;
    }
    .comment-bone-actions-item {
        display: inline-block;
        cursor: pointer;
    } */
</style>

<template>
    <div class="table">
        <!-- 头部菜单按钮 -->
        <div class="table-header">
             <Row>
                <Col span="24">
                    <div style="float:right;"> 
                        <Input v-model="keywords" placeholder="请输入..." style="width: 150px"></Input>
                        <Button type="ghost" icon="ios-search">搜索</Button>
                    </div>
                </Col>
            </Row>
        </div>
        <Table border :columns="columns" :data="list"></Table>
        <!-- <ul class="comment-container">
            <li v-for="item in list" :key="item.id">
                <div class="comment-item">
                    <div class="comment-bone">
                        <div class="comment-bone-avatar">
                            <a href="//www.toutiao.com/c/user/60941435549/" target="_blank" rel="noopener noreferrer">
                                <img class="img-avatar" src="http://p1.pstatp.com/thumb/249a001cdee300fbda98" alt="">
                            </a>
                        </div>
                        <div class="comment-bone-body">
                            <div class="comment-bone-header">
                                <span class="comment-bone-title">{{item.user_name}}</span>
                                <div class="comment-bone-subtitle-right">
                                    <span>{{item.create_time}}</span>
                                </div>
                            </div>
                            <div class="comment-bone-content">
                                <div>
                                    <div class="comment-item-content">{{item.question}}</div>
                                    <p class="comment-item-related-article">在课程：「
                                    <a href="http://toutiao.com/i6485688591530852877/" target="_blank" rel="noopener noreferrer">{{item.course_name}}</a>」提出了问题</p>
                                </div>
                            </div>
                            <div class="comment-bone-actions">
                                <div class="comment-bone-actions-right">
                                    <div>
                                        <div class="comment-bone-actions-item comment-bone-actions-item-right"><a>推荐</a> </div>
                                        <div class="comment-bone-actions-item comment-bone-actions-item-right"><a>收起</a></div>
                                        <div class="comment-bone-actions-item comment-bone-actions-item-right"><a>点赞</a></div>
                                        <div class="comment-bone-actions-item comment-bone-actions-item-right"><a>举报</a></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul> -->
        <Page :current.sync="page" :total="total_count" :page-size="limit" @on-change="getList"  show-total show-elevator :style="{'text-align': 'center'}"></Page>
        <Modal v-model="showAudit" width="240px">
            <audit ref="auditModal" @closeAudit="closeAuditModal" :auditid="qid"></audit>
            <div slot="footer"></div>
        </Modal>
        <Modal v-model="showResponse" width="600px" title="回复用户提问">
            <response ref="responseModal" @closeResponse="closeResponseModal"></response>
            <div slot="footer"></div>
        </Modal>
    </div>
</template>

<script>
import http from '../../../libs/http';
import audit from './audit';
import response from './response';
export default {
    components: {
        audit,
        response
    },
    data () {
        return {
            showAudit: false,
            showResponse: false,
            qid: '',  //问题id
            list: [],
            limit: 15,
            page: 1,
            total_count: 0,
            keywords: '',
            columns: [
                {
                    title: 'ID',
                    key: 'id',
                    align: 'center',
                    width: '5%'
                },
                {
                    title: '相关课程',
                    key: 'course_name',
                    align: 'center'
                },
                {
                    title: '问题',
                    key: 'question',
                    align: 'center'
                },
                {
                    title: '提问者',
                    key: 'user_name',
                    align: 'center'
                },
                {
                    title: '状态',
                    key: 'status',
                    align: 'center',
                    width: '8%',
                    render: (h, params) => {
                        switch (params.row.status) {
                            case 0:
                                return h('Button', {
                                    style: {
                                        padding: '2px 7px',
                                        color: '#fff',
                                        backgroundColor: '#80848f',
                                        borderColor: '#80848f',
                                        cursor: 'default'
                                    }
                                }, '待审核');
                                break;
                            case 1:
                                return h('Button', {
                                    style: {
                                        padding: '2px 7px',
                                        color: '#fff',
                                        backgroundColor: '#19be6b',
                                        borderColor: '#19be6b',
                                        cursor: 'default'
                                    }
                                }, '审核通过');
                                break;
                            case 2:
                                return h('Button', {
                                    style: {
                                        padding: '2px 7px',
                                        color: '#fff',
                                        backgroundColor: '#ed3f14',
                                        borderColor: '#ed3f14',
                                        cursor: 'default'
                                    }
                                }, '审核未通过');
                                break;
                        }
                    }
                },
                {
                    title: '创建时间',
                    key: 'create_time',
                    align: 'center',
                    width: '10%',
                },
                {
                    title: '操作',
                    key: 'action',
                    align: 'center',
                    width: '15%',
                    render: (h, params) => {
                        return h('div', [
                            h('Button',{
                                props: {
                                    type: 'primary',
                                    size: 'small',
                                
                                },
                                style: {
                                    marginRight: '10px'
                                },
                                on: {
                                    click: () => {
                                        this.audit(params.row.id);
                                    }
                                }
                            }, '审核'),
                            h('Button',{
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '10px'
                                },
                                on: {
                                    click: () => {
                                        this.response(params.row.id);
                                    }
                                }
                            }, '回复'),
                            h('Button', {
                                props: {
                                    type: 'error',
                                    size: 'small'
                                },
                                on: {
                                    click: () => {
                                        this.handleRemove(params.row.id)
                                    }
                                }
                            }, '删除')
                        ])
                    }
                }
            ]
        }
    },
    methods: {
        getList( page ) {
            this.page = page;
            var that = this;
            var url = 'admin/course/question/index/page/' + page + '/limit/' + that.limit;
            this.apiGet(url).then((res) => {
                if (res.code != 200) {
                    this.handleError(res);
                } else {
                    that.list = res.data.list;
                    that.total_count = res.data.total_count;
                }
            })
        },
        response (id) {
            this.showResponse = true;
            this.$refs.responseModal.getQuestion(id);
        },
        handleRemove(id) {
            this.$Modal.confirm({
                    width: "200",
                    content: '确认是否删除',
                    onOk: () => {
                        this.delete(id);
                    }
                });
        },
        delete(id) {
            var url = 'admin/course/question/delete/'; 
            this.apiDelete(url, id).then((res) => {
                if (res.code != 200) {
                    this.handleError(res);
                } else {
                    this.getList(this.page);
                    this.$Message.success(res.msg);
                }
            });
        },
        closeAuditModal() {
            this.showAudit = false;
            this.getList(this.page);
        },
        closeResponseModal() {
            this.showResponse = false;
            this.getList(this.page);
        },
        audit(id) {
            this.showAudit = true;
            this.qid = id;
        }
    },
    created () {
        this.getList(this.page);
    },
    mixins: [http]
}
</script>